<template name="myCenter">
	<view class="myCenter">
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg bg-gradual-blue">
				<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"
				 @click="toLogin"></view>
				<view class="text-xl vipText" v-if="phone">VIP：普通会员</view>
				<view class="text-xl vipText" v-else @click="toLogin">点击登录</view>
				<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
			</view>
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<!-- 				<view class="cu-item arrow">
					<navigator class="content" url="/pages/about/test/list" hover-class="none">
						<text class="cuIcon-creativefill text-orange"></text>
						<text class="text-grey">输入激活码</text>
					</navigator>
				</view> -->
				<!-- 				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view> -->
				<view class="cu-item arrow">
					<view class="content" bindtap="showQrcode">
						<text class="cuIcon-appreciatefill text-red"></text>
						<text class="text-grey">赞赏支持</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content" @click="copyLink">
						<text class="cuIcon-friend text-grey"></text>
						<text class="text-grey">关于我们</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: ''
			}
		},
		mounted() {
			this.phone = uni.getStorageSync('phone')
		},
		onShow() {
			this.phone = uni.getStorageSync('phone')
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/subFirst/login/login'
				})
			},
			copyLink() {
				uni.navigateTo({
					url: '/subFirst/aboutUs/aboutUs'
				})
			}
		}
	}
</script>

<style>
	.myCenter {
		width: 100%;
		height: 100vh;
		background: white;
	}

	.UCenter-bg {
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}

	.vipText {
		font-size: 14px;
		margin-top: 15px;
		margin-left: 10px;
	}
</style>
